<template>
	<view class="home">
		<commonHeader :title="$t('in5')" headtitle toback='0'></commonHeader>
		<view class="gHeadbox">
		</view>
		<view class="home_box">
			<!-- {{$t('welcome')}} -->
			<!-- 轮播 -->
			<view class="home_boxSwiper">
				<u-swiper :list="slideList" keyName="url" :autoplay="true" :circular="true" :indicator="true"
					:vertical="true" indicatorActiveColor="#8449E5" indicatorInactiveColor="#8E8E93" indicatorMode="dot"
					height="316rpx"></u-swiper>
			</view>
			<!-- 公告 -->
			<view class="homeCar" @click="tonative(1,$t('in7'))">
				<image src="@/static/img/home_search.png" mode=""></image>
				<!-- <text >这里是公告栏啦啦这里是公告栏啦~</text> -->
				<swiper class="swiper_box" :autoplay="true" :interval="2000" :circular="true" :duration="1000"
					:vertical="true">
					<swiper-item v-for="(item,i) in noticList" :key="i">
						<view @click.stop="toNoticeDetail(item.id,$t('in8'))" class="hidden-text">
							{{item.title}}
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 数据 -->
			<view class="home_junum">
				<view class="home_junum_item">
					<view class="home_junum_iteml">
						<image src="@/static/img/home_j.png" mode=""></image>
					</view>
					<view class="home_junum_itemr">
						<view class="home_junum_itemlnume">
							{{$t('in9')}}
						</view>
						<view class="home_junum_itemlnumes">
							{{jumpData.jumpTotal?Number(parseInt(jumpData.jumpTotal)):'0'}}<text>JUMP</text> 
						</view>
					</view>
				</view>
				<view class="home_junum_item home_junum_items">
					<view class="home_junum_iteml">
						<image src="@/static/img/home_js.png" mode=""></image>
					</view>
					<view class="home_junum_itemr">
						<view class="home_junum_itemlnume">
							{{$t('in10')}}
						</view>
						<view class="home_junum_itemlnumes">
							{{jumpData.jumpPrice?Number(retainFourDecimals(jumpData.jumpPrice)):'0'}}<text>USDT</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 用户公告 -->
			<view class="home_user">
				<image src="@/static/img/home_logo.png" mode=""></image>
				<view class="home_user_list">
					<swiper class="user_swiper" :vertical="true" :autoplay="true" interval="1500" duration="1000" :disable-touch="true"
						easing-function="linear" :circular="true" :acceleration="true">
						<swiper-item v-for="(item,index) in newList " :key="index">
							<view class="hidden-text">
								{{maskAddress(item.address)}}{{$t('in16')}}{{item.levelName}}
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<!-- 链商 -->
			<view class="home_chain">
				<view class="home_chain_l" @click="toChain()">
					<image src="@/static/img/home_Crypto.png" class="pimg" mode=""></image>
					<view class="home_chain_l_t lianleft">
						<text class="">{{$t('in11')}}</text>
						<text class="tolian"></text>
					</view>
					<view class="home_chain_l_ts lianleft">
						<text>Poster</text>
					</view>
				</view>
				<view class="home_chain_r">
					<view class="home_chain_rbox" @click="tonative(2,$t('in12'))">
						<view class="home_chain_l_t lianleft">
							<text class="home_chain_l_t_wen ">{{$t('in13')}}</text>
							<text class="tolian"></text>
						</view>
						<view class="home_chain_l_ts lianleft">
							<text>JUMP News</text>
						</view>
					</view>
					<view class="home_chain_rbox home_chain_rboxs" @click="tovideo()">

						<view class="home_chain_l_t lianleft">
							<text class="home_chain_l_t_wen ">{{$t('in14')}}</text>
							<text class="tolian"></text>
						</view>
						<view class="home_chain_l_ts lianleft">
							<text>Business Class</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		homeIndex,
		noticeList,
		activeLog, //获取激活日志
	} from '@/api/home.js'
	export default {
		data() {
			return {
				jumpData: '', //首页数据
				slideList: [], //轮播
				noticList: [], //公告
				newList: [], //新闻上面
			}
		},
		components: {},
		onLoad() {},
		mounted() {
			// this.onInfo()
		},
		onShow() {
			console.log('show')
			this.onInfo()
			this.setTitle()//动态修改头部和tabBar
		},
		methods: {
			setTitle() {
				uni.setTabBarItem({
					// 修改底部导航
					index: 0,
					text: this.$t('rp1'),
				});
				uni.setTabBarItem({
					// 修改底部导航
					index: 1,
					text: this.$t('rp2'),
				});
				uni.setTabBarItem({
					// 修改底部导航
					index: 2,
					text: this.$t('rp3'),
				});
				uni.setTabBarItem({
					// 修改底部导航
					index: 3,
					text: this.$t('rp4'),
				});
			},
			// 去视频
			tovideo() {
				uni.navigateTo({
					url: '/pages/index/pvideo/pvideo'
				})
			},
			// 去公告
			tonative(types, names) {
				uni.navigateTo({
					url: '/pages/index/notice/notice?type=' + types + '&names=' + names
				})
			},
			toNoticeDetail(tid, names) {
				uni.navigateTo({
					url: '/pages/index/notice/item/item?tid=' + tid + '&names=' + names
				})
			},
			maskAddress(address) {
				// if (address.length <= 8) {
				// 	return address.replace(/./g, '*');
				// }
				if (!address) return;
				return address.substr(0, 4) + "****" + address.substr(-4);
			},
			// 首页接口
			onInfo() {
				// 首页
				homeIndex().then(res => {
					if (res.code == 200) {
						this.jumpData = res.data;
						this.slideList = res.data.slideList;
						this.slideList.forEach(item => {
							item.url = this.$store.state.befurl + item.url
							if (item.type == 1) {
								item.type = 'image'
							} else if (item.type == 2) {
								item.type = 'video'
							} else {
								item.type = 'image'
							}
						})
					}
					this.onticeList(1, 1, 10).then(res => {
						if (res.code == 200) {
							this.noticList = res.data
						}
					})
				})
				this.fnactiveLog(); //激活日志

			},
			fnactiveLog() {
				let acparams = {
					page: 1,
					pageSize: 20
				}
				activeLog(acparams).then(res => {
					if (res.code == 200) {
						this.newList = res.data
					}
				})
			},
			// 公告/新闻
			onticeList(ntype, npage, npageSize) {
				var langs = uni.getStorageSync('language') || 'zh';
				if (langs == 'zh-Hans' || langs == 'zh-Hant') {
					langs = 'zh'
				}
				let param = {
					type: ntype,
					page: npage,
					pageSize: npageSize,
					lang: langs
				}
				return noticeList(param)
			},
			toChain() {
				uni.showToast({
					icon: 'error',
					title: this.$t('in15'),

				})
			},
			retainFourDecimals(num) {
			    return Math.floor(num * 10000) / 10000;
			}
		},
	}
</script>
<style>
	/deep/.u-swiper {
		--bg: linear-gradient(180deg, #346575 0%, #1a283b 100%);
		--border: linear-gradient(270deg, #455364, #aec9e9, #455364);
		border: 1px solid transparent;
		/* var(--bg)背景色  var(--border)边框色 */
		background-image: var(--bg), var(--border);
		background-origin: border-box;
		background-clip: content-box, border-box;
		border-radius: 20rpx !important;
		overflow: hidden;

	}

	/deep/.uni-video-control-button.uni-video-control-button-play::after,
	/deep/.uni-video-cover-play-button {
		background-image: url('@/static/img/home_videobtn.png');

	}

	/deep/.uni-video-cover-play-button {
		width: 136rpx;
		height: 114rpx;
	}

	/deep/.uni-video-cover-duration {
		display: none;
	}

	.swiper_box {
		width: 100%;
		height: 64rpx;
	}

	.user_swiper {
		height: 210rpx;


	}

	.user_swiper /deep/.uni-swiper-slide-frame {
		height: 40rpx !important;
	}

	/deep/uni-image>img {
		opacity: inherit !important;
	}
</style>
<style scoped lang="scss">
	page {
		background-color: #000000;
	}

	.home {
		.home_box {
			padding: 30rpx;
			box-sizing: border-box;

			// 轮播
			.home_boxSwiper {
				width: 100%;
				margin-bottom: 40rpx;

			}

			// 公告
			.homeCar {
				width: 100%;
				height: 64rpx;
				line-height: 64rpx;
				border: 1px solid transparent;
				border-radius: 16rpx;
				// border-image-source: linear-gradient(to left, #455364, #aec9e9, #455364);
				// border-image-slice: 1;
				background-color: rgba(125, 0, 158, 0.32);
				display: flex;
				align-items: center;
				justify-content: flex-start;
				padding: 6px 36rpx;
				box-sizing: border-box;
				color: #e6bcff;
				font-size: 28rpx;
				margin-bottom: 50rpx;
				position: relative;

				&::before {
					/* 1 */
					display: block;
					content: '';
					border-radius: 16rpx;
					border: 2rpx solid transparent;
					background: linear-gradient(190deg, #aec9e9, transparent 100%) border-box;
					/* 2 */
					-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
					/* 3 */
					-webkit-mask-composite: xor;
					/* 4 */
					mask-composite: exclude;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}

				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 16rpx;
				}

				text {
					width: calc(100% - 100rpx);
					display: inline-block;
				}
			}

			// 币
			.home_junum {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 40rpx;

				.home_junum_item {
					width: 48%;
					display: flex;
					align-items: flex-start;
					padding: 20rpx 30rpx;
					box-sizing: border-box;
					position: relative;
					background-color: transparent;
					border: 1px solid transparent;
					border-radius: 32rpx 0;

					.home_junum_iteml {
						margin-right: 10rpx;

						image {
							width: 26rpx;
							height: 26rpx;
						}
					}

					.home_junum_itemr {
						.home_junum_itemlnume {
							color: #e2b0ff;
							font-size: 28rpx;
						}

						.home_junum_itemlnumes {
							color: #bd99d9;
							font-size: 48rpx;
							font-weight: 500;
							margin-top: 8rpx;
							text{
								font-size: 24rpx
							}
						}
					}

					&::before {
						/* 1 */
						display: block;
						content: '';
						border-radius: 32rpx 0;
						border: 2rpx solid transparent;
						background: linear-gradient(45deg, #aec9e9, transparent 100%) border-box;
						/* 2 */
						-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
						/* 3 */
						-webkit-mask-composite: xor;
						/* 4 */
						mask-composite: exclude;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}
				}

				// .home_junum_item::before {
				// 	content: '';
				// 	position: absolute;
				// 	top: -1px;
				// 	left: -1px;
				// 	right: -1px;
				// 	bottom: -1px;
				// 	z-index: 1;
				// 	// background: linear-gradient(to top left, transparent 50%, #FFFFFF 50%);

				// 	border-style:solid;
				// 	border-width: 1px;
				// 	border-image: linear-gradient(to left, #455364, #aec9e9, #455364);
				// 	border-image-slice: 1;
				// }

				.home_junum_items {
					margin-left: 42rpx;

					.home_junum_itemr {
						.home_junum_itemlnume {
							color: #ffffff;
						}

						.home_junum_itemlnumes {
							color: #ffffff;
						}
					}
				}
			}

			// 用户
			.home_user {
				width: 100%;
				border-top: 2rpx solid #ffffff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 50rpx;
				box-sizing: border-box;
				margin-bottom: 50rpx;

				image {
					width: 168rpx;
					height: 168rpx;
					flex-shrink: 0;
				}

				.home_user_list {
					width: calc(100% - 208rpx);
					height: 210rpx;
					overflow: hidden;
					color: rgba(218, 170, 249, 0.5);
					font-size: 20rpx;
					font-weight: 700;
					text-align: left;
					display: inline-block;
					margin-left: 80rpx;
					line-height: 40rpx;

					view {
						width: 100%;
					}
				}
			}

			// 链商
			.home_chain {
				width: 100%;
				display: flex;
				// align-items: center;
				justify-content: space-between;
				margin-bottom: 50rpx;

				.home_chain_l {
					background: url('@/static/img/home_logobox.png') no-repeat 100%;
					background-size: cover;
					width: 324rpx;
					// height: 392rpx;
					padding: 2rpx 10rpx 10rpx;
					box-sizing: border-box;
					text-align: center;
					background-color: transparent;
					border: 1px solid transparent;
					border-radius: 32rpx;
					position: relative;

					&::before {
						/* 1 */
						width: 324rpx;
						height: 100%;
						display: block;
						content: '';
						border-radius: 32rpx;
						border: 2rpx solid transparent;
						background: linear-gradient(250deg, #aec9e9, transparent 100%) border-box;
						/* 2 */
						-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
						/* 3 */
						-webkit-mask-composite: xor;
						/* 4 */
						mask-composite: exclude;
						position: absolute;
						top: 0;
						left: 0;
					}

					image.pimg {
						width: 280rpx;
						height: 254rpx;
					}

					.lianleft {
						margin-left: 20rpx;
					}

					.home_chain_l_t {
						text-align: left;
						color: rgb(255, 255, 255);
						font-size: 48rpx;
						display: flex;
						align-items: center;

						.tolian {
							display: inline-block;
							position: relative;
							margin-left: 10rpx;
							width: 20rpx;
							height: 20rpx;

							&::after {
								width: 20rpx;
								height: 20rpx;
								border-top: 4rpx solid;
								border-right: 4rpx solid;
								border-color: #ffffff;
								content: '';
								position: absolute;
								right: 0px;
								top: 0px;
								transform: rotate(45deg);

							}
						}
					}

					.home_chain_l_ts {
						text-align: left;
						color: rgb(205, 205, 205);
						font-size: 24rpx;
						font-weight: 500;
						font-family: "DM Sans";
						margin-top: 4rpx;
					}
				}

				.home_chain_r {
					.home_chain_rbox {
						background: url('@/static/img/home_bom.png') no-repeat 100%;
						background-size: cover;
						width: 324rpx;
						// height: 160rpx;
						padding: 38rpx 30rpx;
						box-sizing: border-box;

						.home_chain_l_t {
							text-align: left;
							color: rgb(255, 255, 255);
							font-size: 48rpx;
							display: flex;
							align-items: center;

							.home_chain_l_t_wen {
								font-family: "旁门正道标题体";

							}

							.tolian {
								display: inline-block;
								position: relative;
								margin-left: 10rpx;
								width: 14rpx;
								height: 14rpx;

								&::after {
									width: 14rpx;
									height: 14rpx;
									border-top: 4rpx solid;
									border-right: 4rpx solid;
									border-color: #ffffff;
									content: '';
									position: absolute;
									right: 0px;
									top: 0px;
									transform: rotate(45deg);

								}
							}
						}

						.home_chain_l_ts {
							text-align: left;
							color: rgb(205, 205, 205);
							font-size: 24rpx;
							font-weight: 500;
							font-family: "DM Sans";
							margin-top: 4rpx;

						}
					}

					.home_chain_rboxs {
						background: url('@/static/img/home_boms.png') no-repeat 100%;
						background-size: cover;
						margin-top: 36rpx;
					}
				}
			}

		}
	}
</style>